//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only

import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";
import { useGitStores } from "./store";
import { Button, Divider, Input, Menu, message, Space } from "antd";
import { ItemType } from "antd/lib/menu/hooks/useItems";
import { BranchesOutlined, CloudOutlined, ReloadOutlined, SearchOutlined, TagOutlined } from "@ant-design/icons";

export interface MainMenuProps {
    curMenuValue: string;
    onMenuChange: (value: string) => void;
}

const MainMenu = (props: MainMenuProps) => {
    const store = useGitStores();

    const [refItemList, setRefItemList] = useState<ItemType[]>([]);
    const [keyword, setKeyword] = useState("");

    const calcRefItemList = async () => {
        const localBranchList = store.localBranchList.map(branch => ({
            label: `${branch.name}${(store.headInfo?.detached == false && store.headInfo.branch_name == branch.name) ? "(HEAD)" : ""}`,
            title: branch.name,
            key: branch.commit_id,
            style: { fontWeight: 400 },
        }));
        const tagList = store.tagList.map(tag => ({
            label: `${tag.name}${(store.headInfo?.detached == true && store.headInfo.tag_name == tag.name) ? "(HEAD)" : ""}`,
            key: tag.commit_id,
            style: { fontWeight: 400 },
        }));
        const remoteList = store.remoteList.map(remote => {
            const branchList = store.remoteBranchList.filter(branch => branch.name.startsWith(`${remote.name}/`)).map(branch => ({
                label: branch.name.substring(`${remote.name}/`.length),
                title: branch.name.substring(`${remote.name}/`.length),
                key: branch.commit_id,
                style: { fontWeight: 400 },
            }))
            return {
                label: remote.name,
                key: `remote/${remote.name}`,
                children: branchList,
                style: { fontWeight: 400 },
            };
        })
        setRefItemList([
            {
                label: "分支",
                key: "localBranchList",
                icon: <BranchesOutlined style={{ fontSize: "16px" }} />,
                children: localBranchList,
                style: { fontSize: "16px", fontWeight: 700 },
            },
            {
                label: "标签",
                key: "tagList",
                icon: <TagOutlined style={{ fontSize: "16px" }} />,
                children: tagList,
                style: { fontSize: "16px", fontWeight: 700 },
            },
            {
                label: "远程",
                key: "remoteList",
                icon: <CloudOutlined style={{ fontSize: "16px" }} />,
                children: remoteList,
                style: { fontSize: "16px", fontWeight: 700 },
            }
        ]);
    };

    useEffect(() => {
        calcRefItemList();
    }, [store.localBranchList, store.remoteBranchList, store.headInfo, store.tagList, store.remoteList, keyword]);

    return (
        <div>
            <Menu mode="inline" selectedKeys={[props.curMenuValue]}
                items={[
                    {
                        label: "工作目录",
                        key: "workDir",
                        style: { fontSize: "16px", fontWeight: 700 },
                    },
                    {
                        label: "文件状态",
                        key: "fileStatus",
                        style: { fontSize: "16px", fontWeight: 700 },
                    },
                    {
                        label: "贮藏列表",
                        key: "stashList",
                        style: { fontSize: "16px", fontWeight: 700 },
                    }
                ]}
                onSelect={info => {
                    if (info.selectedKeys.length > 0) {
                        props.onMenuChange(info.selectedKeys[0]);
                    }
                }} />
            <Divider style={{ margin: "4px 0px" }} />
            <Space>
                <Input bordered placeholder="搜索" suffix={<SearchOutlined />} style={{ marginBottom: "4px", width: "200px", marginLeft: "8px" }}
                    value={keyword} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setKeyword(e.target.value.trim());
                    }} />
                    <Button type="link" icon={<ReloadOutlined style={{fontSize:"20px"}} title="刷新" onClick={e=>{
                        e.stopPropagation();
                        e.preventDefault();
                        const f = async () => {
                            await store.loadHeadInfo();
                            await store.loadBranchList();
                            await store.loadTagList();
                            await store.loadRemoteList();
                            message.info("已刷新分支/标签/远程信息");
                        };
                        f();
                    }}/>}/>
            </Space>
            <Menu mode="inline" selectedKeys={[props.curMenuValue]} items={refItemList} defaultOpenKeys={["localBranchList"]}
                style={{ height: "calc(100vh - 140px)", overflowY: "scroll", overflowX: "hidden" }}
                onSelect={info => {
                    if (info.selectedKeys.length > 0) {
                        props.onMenuChange(info.selectedKeys[0]);
                    }
                }} />
        </div>
    )
};

export default observer(MainMenu);